<template>
    <div class="app-container">
        <div class="filter-container">
            <el-input v-model="query.name" class="filter-item w-200" size="medium" placeholder="种类名称"></el-input>
            <el-select v-model="query.school_id" clearable class="filter-item w-200" size="medium" placeholder="请选择所属学校">
                <el-option
                        v-for="item in schoolData"
                        :key="item.id"
                        :label="item.name"
                        :value="item.id">
                </el-option>
            </el-select>
            <el-button class="filter-item" size="medium" icon="el-icon-search" @click="fetchList(true)">搜 索</el-button>
        </div>
        <el-table :data="foodTypeData" v-loading="loading" border style="width: 100%">
            <el-table-column width="100px" label="#" align="center">
                <template slot-scope="scope" >
                    {{query.size * (query.page-1) + scope.$index + 1}}
                </template>
            </el-table-column>
            <el-table-column prop="name" label="名称" align="center"></el-table-column>
            <el-table-column prop="description" label="描述" align="center"></el-table-column>
            <el-table-column prop="count" label="菜品数量" width="200px" align="center"></el-table-column>
            <el-table-column prop="school.name" label="所属学校" align="center"></el-table-column>
            <el-table-column label="状态" align="center">
                <template slot-scope="scope">
                    <i class="el-icon-check" v-if="scope.row.status === 1" />
                    <i class="el-icon-close" v-else />
                </template>
            </el-table-column>
            <el-table-column prop="updated_at" label="更新时间" align="center" width="300px"></el-table-column>
        </el-table>
        <div class="pagination-container">
            <el-pagination
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page="query.page"
                    :page-sizes="[10, 20, 30, 50]"
                    :page-size="query.size"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="total">
            </el-pagination>
        </div>
    </div>
</template>

<script>
    import { fetchFoodTypes } from '@/api/food'
    import { fetchSchools } from '@/api/data'
    export default {
      name: 'type',
      data() {
        return {
          loading: false,
          total: 0,
          query: {
            size: 10,
            page: 1,
            name: '',
            school_id: ''
          },
          foodTypeData: [],
          schoolData: []
        }
      },
      methods: {
        fetchList(resetPage = false) {
          this.loading = true
          if (resetPage === true) {
            this.query.page = 1
          }
          fetchFoodTypes(this.query).then(res => {
            this.foodTypeData = res.data
            this.total = res.meta.total
            this.loading = false
          })
          // 获取学校列表
          fetchSchools().then(res => {
            this.schoolData = res.schools
          })
        },
        handleSizeChange(size) {
          this.query.size = size
          this.fetchList()
        },
        handleCurrentChange(page) {
          this.query.page = page
          this.fetchList()
        }
      },
      created() {
        this.fetchList()
      }
    }
</script>

<style scoped>
    .el-icon-check{
        color: green;
    }
    .el-icon-close{
        color: red;
    }
</style>
